<template>
  <div>
    <div @click="showModel">车系</div>
    <div class="model" v-show="modelState">
      <div class="model-info">
        <span></span>
        <span @click="hideModel">x</span>
      </div>
      <ul class="model-ul">
        <li class="brand-item" v-for="(item, index) in modelList" :key="index">
          <div><span>{{item.value}}</span></div>
          <ul class="model-list">
            <li class="model-item" v-for="(jItem, jIndex) in item.list" :key="jIndex">
              {{jItem.value}}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        modelState: false,
        curModel: [],
        modelList: []
      }
    },
    methods: {
      showModel () {
        this.modelState = true
      },
      hideModel () {
        this.modelState = false
      },
      getModelList () {
        const data = [
          {
            id: '1',
            pid: '0',
            value: '比亚迪',
            key: '101'
          },
          {
            id: '2',
            pid: '1',
            value: '唐',
            key: '102'
          },
          {
            id: '3',
            pid: '1',
            value: '宋',
            key: '103'
          },
          {
            id: '4',
            pid: '4',
            value: '元',
            key: '104'
          },
          {
            id: '5',
            pid: '0',
            value: '长安',
            key: '105'
          },
          {
            id: '6',
            pid: '5',
            value: '长安v5',
            key: '103'
          },
          {
            id: '7',
            pid: '5',
            value: '长安v6',
            key: '104'
          },
        ]
        const brands = []
        data.map(item => {
          if (item.pid === '0') {
            item.list = []
            brands.push(item)
          }
        })
        brands.map(item => {
          data.map(jItem => {
            if (item.id === jItem.pid) {
              item.list.push(jItem)
            }
          })
        })
        this.modelList = brands.slice(0)
        console.log(this.modelList)
      }
    },
    created () {
      this.getModelList()
    }
  }
</script>

<style lang="less" scoped>
  @import '../../assets/less/default.less';
  .model {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: @white;
    z-index: 33;
  }
</style>
